<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>推箱子网页版</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<style type="text/css">
ol,li{
	margin: 0px;
	padding: 0px;
}
</style>
<script type="text/javascript">
	function keydown(e) {
		if ( e.keyCode < 37 || e.keyCode > 40 ){
			return;
		}
		v.move(e.keyCode);

		// e.keyCode==37 && /*游戏左移*/ 	||
		// e.keyCode==38 && /*游戏上移*/ 		||
		// e.keyCode==39 && /*游戏右移*/ 	||
		// e.keyCode==40 && /*游戏下移*/;
		// 判断当前关结束就进入下一关
	}
</script>
</head>
<body onkeydown="keydown(event)">

	<div id="main" style="padding: 20px;">
		<h1>推箱子网页版</h1>
		<div id="map" style="float: left">
			<div v-for="row in game.map" style="height: 30px">
				<img v-for=" i in row" :src="'imgs/'+i+'.GIF'">
			</div>
		</div>
		<div id="ctl" style="padding: 20px; float: left; text-align: center;">
			<h2>第1关</h2>
			<span>第0步</span><br>
			<br>
			<input placeholder="尊姓大名" style="width:96px;text-align: center">
			<br>
			<br>
			<button style="width: 100px">重新开始</button>
			<br>
			<br>
			<button style="width: 100px">保    存</button>
			<br>
			<br>
			<button style="width: 100px">加    载</button>
		</div>
		<div id="score" style="padding: 20px; float: left; text-align: center;">
			<h2>排名</h2>
			<ol>
				<li>李逵
				<li>武松
				<li>林冲
				<li>宋江
			</ol>
		</div>
	</div>

	<script>
		var v = new Vue({
			el : "#main",
			data : {
				game : null
			},
			// 事件钩子函数
			// created
			//
			created(){
				this.game = new Game();
				this.game.next();
			},
			methods:{
				move(keycode){
					if (keycode == 37){ //"A"
						this.game.left();
					} else if (keycode == 38){ // "W"
						this.game.up();
					} else if (keycode == 39){ // "D"
						this.game.right();
					} else if (keycode == 40){ // "S"
						this.game.down();
					} else{
						return;
					}
					// 强制刷新
					this.$forceUpdate();

					if (this.game.youWin()){
						// 延迟100毫秒显示结果，让地图渲染完成
						setTimeout(()=>{
							alert("厉害！！！");
							this.game.next();
						},100);
					}
				}
			}
		})
	</script>
</body>
</html>